<template>
    <view class="contanier">
        <view class="form-wrap">
            <uni-forms ref="valiForm" :modelValue="valiFormData">
                <!-- 原密码 -->
                <uni-forms-item
                    label-align="right"
                    :label-width="labelWidth"
                    label="原密码"
                    required name="raw_password">
                    <uni-easyinput
                        prefixIcon="locked-filled"
                        v-model="valiFormData.raw_password"
                        :primaryColor="global.THEME_COLOR"
                        placeholder="请输入原密码" />
                </uni-forms-item>

                <!-- 新密码 -->
                <uni-forms-item
                    label-align="right"
                    :label-width="labelWidth"
                    label="新密码"
                    required
                    name="new_password">
                    <uni-easyinput
                        prefixIcon="locked"
                        v-model="valiFormData.new_password"
                        :primaryColor="global.THEME_COLOR"
                        placeholder="请输入新密码" />
                </uni-forms-item>

                <!-- 确认密码 -->
                <uni-forms-item
                    label-align="right"
                    :label-width="labelWidth"
                    label="确认密码"
                    required
                    name="repassword">
                    <uni-easyinput
                        prefixIcon="locked-filled"
                        v-model="valiFormData.repassword"
                        :primaryColor="global.THEME_COLOR"
                        placeholder="请输入确认密码" />
                </uni-forms-item>
            </uni-forms>


            <view class="btn-wrap">
                <text class="btn" @click="handlerSave">保 存</text>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { inject, reactive, ref } from "vue"
import { useUserStore } from '@/stores'

// 全局属性
const global: any = inject('global')

// 用户存储
const userStore = useUserStore()

const valiFormData = reactive({
	raw_password: '',
	new_password: '',
	repassword: '',
})

const labelWidth:any = ref('140rpx')


// 保存数据
const handlerSave = async () => {
    if (valiFormData.raw_password == '') {
        uni.showToast({
            icon: 'none',
            title: '请输入原密码',
        })
        return false
    }

    if (valiFormData.new_password == '') {
        uni.showToast({
            icon: 'none',
            title: '请输入新密码',
        })
        return false
    }

    if (valiFormData.new_password != valiFormData.repassword) {
        uni.showToast({
            icon: 'none',
            title: '两次密码不一致',
        })
        return false
    }
    
    await userStore.changePassword(valiFormData)
    uni.showToast({
        title: '修改成功',
        duration: 1000
    })
    setTimeout(() => {
        uni.redirectTo({url: '/pagesUser/user_set/index'})
    }, 1000)
}
</script>

<style lang="scss">
.contanier {
    padding: 20rpx 10rpx 0 10rpx;
    .form-wrap {
        background-color: #fff;
        padding: 10rpx;
    }

    .btn-wrap {
        padding-top: 10rpx;
        padding-bottom: 20rpx;
        display: flex;
        justify-content: center;
        .btn {
            display: block;
            width: 600rpx;
            height: 70rpx;
            line-height: 70rpx;
            border-radius: 35rpx;
            color: #fff;
            text-align: center;
            background-color: $uni-color-primary;
        }
    }
}
</style>